<template>
	<view class="dis tabs_total">
		<view class="fl1">
			<view class="dis pt10 pb10" @click.stop="tabsClick(0)">
				<view class="tabs_radio mr20" :class="{ tabs_active: tabsIndex === 0 }" ></view>
				<view class="fs28">总支出(元)</view>
			</view>
			<view class="tabs_pl expend_color">-{{ expend }}</view>
		</view>
		<view class="fl1">
			<view class="dis pt10 pb10"  @click.stop="tabsClick(1)">
				<view class="tabs_radio mr20" :class="{ tabs_active: tabsIndex === 1 }"></view>
				<view class="fs28">总收入(元)</view>
			</view>
			<view class="tabs_pl income_color">{{ income }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			expend: {
				type: String,
				default: '30'
			},
			income: {
				type: String,
				default: '30'
			}
		},
		data() {
			return {
				tabsIndex: 0
			}
		},
		methods: {
			tabsClick(index) {
				this.tabsIndex = index
				this.$emit('tabsClick', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs_total {
		height: 120rpx;
		.tabs_radio {
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			border: 1rpx solid #ddd;
		}
		.tabs_pl {
			padding-left: 50rpx;
		}
	}
	.expend_color {
		color:  #37af6b;
	}
	.income_color {
		color: #ffcd54;
	}
	.tabs_active {
		background-color: #ffcd54;
		border-color: #ffcd54!important;
	}
</style>